<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color:aqua;font-size: 45px;">
        <span style="float:right" >欢迎您,{{ userName }}
          <el-button type="success" @click="logout">退出</el-button>
        </span>
      </el-header>
      <el-container>
        <el-aside width="200px">
            <el-menu
        active-text-color="#ffd04b"
        background-color="aquamarine"
        class="el-menu-vertical-demo"
        :default-active="1"
        text-color="#fff"
         :default-openeds="['3']"
router
      >
       
         <el-sub-menu v-for="(a, index) in url" :key="index" :index="a.url || index.toString()">
              <template #title>
                <el-icon><i-ep-folder /></el-icon>
                <span>{{ a.menuName }}</span>
              </template>
              
              <el-menu-item v-for="(b, bIndex) in a.children" :key="bIndex" :index="b.url || `${index}-${bIndex}`">
                <el-icon><i-ep-document /></el-icon>
                <span>{{ b.menuName }}</span>
              </el-menu-item>
            </el-sub-menu>
       
      </el-menu>
        </el-aside>
        <el-main>
            <RouterView/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { RouterView,useRoute, useRouter} from 'vue-router';
  const route=useRoute();
  const router=useRouter();
import axios from 'axios';
import { onMounted } from 'vue';
import { ref } from 'vue';


onMounted(() => {
  CascdeMenuget();
})

const url = ref([
  {
   "menuId": "",
      "menuName": "",
      "url": "",
      "children": [
        {
          "menuId": 4,
          "menuName": "",
          "url": "",
          "children": []
        },]
  }
])

const CascdeMenuget = () => {
  let roleid=localStorage.getItem("roleId");
  axios
  ({
    url:'http://localhost:5110/api/RoleMenu/GetUserRoleMenuShow',
    method:'get',
    params:
    {
      RoleId:roleid
    }
  })
  .then(res=>{
    url.value=res.data.data;
  })
}
const userName=ref()
onMounted(()=>
{
  userName.value=localStorage.getItem("userName");
})

const logout=()=>
{
  localStorage.removeItem("userName");
  router.push('/')
}
</script>
